<template>
  <el-dialog
    :visible.sync="dialogShow"
    :show-close="true"
    :append-to-body="false"
    :before-close="handleClose"
    class="monitoring-dialog normal-common-dialog-size"
  >
    <div v-loading="loading" style="min-height: 380px;position: relative;">
      <div class="list-tab-absolute">
        <ListTab v-model="activeTab" :tabs="tabs" :is-center="true" padding-left="0px" @tabClick="tabClick"/>
      </div>
      <veLine
        v-if="isShowChart()"
        ref="monitoringData"
        :data="chartData"
        :height="'400px'"
        :judge-width="true"
        :setting="chartSettings"
        :extend="extendData"
        resizeable
      />
      <empty-placeholder v-else :empty-img="emptyImg" image-size="100px" style="margin-top: 65px" />
    </div>
  </el-dialog>
</template>

<script>
import veLine from 'v-charts/lib/line.common';
import ListTab from '@/components/ListTab';
import { getMonitoringData } from '@/api/accounts';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import emptyImg from '@/assets/empty-table-data.png';

export default {
  name: 'MonitoringChart',
  components: { ListTab, veLine, EmptyPlaceholder },
  data() {
    return {
      emptyImg,
      id: null,
      dialogShow: false,
      loading: false,
      activeTab: 0,
      healthValue: [],
      tabs: [
        { id: 0, name: '转发', label: 'forward' },
        { id: 1, name: '评论', label: 'comment' },
        { id: 2, name: '点赞', label: 'like' }
      ],
      chartData: null
    };
  },
  computed: {
    chartSettings() {
      const settings = {
        metricsType: {}
      };
      settings.metricsType[this.tabs[this.activeTab].name] = '0a';
      if (!this.chartData) return {};
      const labelMap = this.chartData.labelMap;
      if (labelMap) {
        settings.labelMap = labelMap;
      }
      return settings;
    },
    extendData() {
      const _this = this;
      return {
        legend: {
          show: true,
          right: 10
        },
        xAxis: {
          axisLabel: {
            interval: 0,
            rotate: _this.chartData.rows.length > 4 ? 75 : 0
          }
        },
        color: ['#406EFF', '#FD8546', '#F9C142', '#7254F6', '#FF6573', '#31CC9C', '#E473E8', '#7BE0F2', '#A4DD6C']
      };
    }
  },
  methods: {
    openDialog(id, data) {
      this.dialogShow = true;
      this.id = id;
      this.healthValue = data;
      this.getData();
    },
    tabClick() {
      this.getData();
    },
    isShowChart() {
      return this.chartData !== null && this.chartData.rows.some(it => it[1] !== null);
    },
    getData() {
      const params = {
        id: this.id,
        type: this.activeTab
      };
      this.loading = true;
      getMonitoringData(params).then(res => {
        this.loading = false;
        if (res.code === 200 && res.data.columns) {
          this.handleData(res.data);
          this.chartData = res.data;
          if (this.chartData && this.chartData.rows.every(it => !it[this.tabs[this.activeTab].name])) {
            this.chartData = null;
          }
        } else {
          this.chartData = null;
        }
      }).catch(() => {
        this.loading = false;
        this.chartData = null;
      });
    },
    handleData(data) {
      // 0值断开
      data.rows = data.rows.map(i => {
        const res = {
          '时间': i[0]
        };
        res[this.tabs[this.activeTab].name] = i[1] === 0 ? null : i[1];
        return res;
      });
      // 添加健康值显示
      this.healthValue.length && this.healthValue.map(it => {
        data.columns.push(`健康值(发文${it.time}小时内)`);
        data.rows = data.rows.map(item => {
          const res = { ...item };
          res[`健康值(发文${it.time}小时内)`] = it[this.tabs[this.activeTab].label] === 0 ? null : it[this.tabs[this.activeTab].label];
          return res;
        });
      });
    },
    handleClose() {
      this.activeTab = 0;
      this.dialogShow = false;
      this.chartData = null;
      this.healthValue = [];
    }
  }
};
</script>

<style lang="scss" scoped>
.monitoring-dialog {
  &::v-deep {
    .el-dialog__body {
      padding-top: 0 !important;
      padding-left: 16px !important;
      padding-right: 16px !important;
    }
  }
}
.list-tab-absolute{
  border-bottom: 1px solid #F5F5F5;
  margin-bottom: 10px;
}

</style>
